
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    



         <div id="app"> 
          
         </div>

         <!-- <script src="./defineReactive.js"></script>
         <script src="./Observer.js"></script> -->
         
         <script src="./observe.js"></script>
         <script src="./Watcher.js"></script>
         <script>
                    var obj={
                        a:{
                            m:{
                                n:5
                            }
                        },
                        bb:{
                           dd: 10
                        },
                        // b:10,
                        gg:[1,5,6],
                        ww:10,
                        tt:20,
                        yy:[
                            {
                                name:"小明",
                                id:"1"
                            },
                            {
                                name:"小红",
                                id:"2"
                            },

                        ],
                    }

                    //创建一个observe函数 没有r
                    //这个函数只为对象服务
                    // function observe(value){
                    //     //传进来的value是 defineReactive传进来的那个闭包的value
                    //     if(typeof value !='object'){
                    //          return
                    //     }
                    //     //定义ob  __ob__ 实际就是存贮Observer类的实例的 __前缀和__后缀就是不希望和常见的属性重名
                    //     if(typeof value.__ob__ !=='undefined'){
                    //           ob=value.__ob__
                    //     }else{
                    //           ob=new Observer(value)
                    //     }
                    //     return ob
                    // }
                    observe(obj)
                    // obj.gg.push(99)
                   
                    // new Watcher(obj,'a.m.n',(val)=>{
                    //     console.log('watcher'+val)
                    // })

                    // obj.a.m.n=88//必须改变上面的watcher才执行  他就触发了defineReactive中的get

                    // new Watcher(obj,'bb.dd',(val)=>{
                    //     console.log('watcher'+val)
                    // })

                    // obj.bb.dd=99//必须改变上面的watcher才执行  他就触发了defineReactive中的get
                    //obj.ww=100
                    // new Watcher(obj,'ww',(val)=>{
                    //     console.log('watcher'+val)
                    // })
                   
                    /*
                        new Watcher(obj,'a.m.n',(val)=>{
                            console.log('watcher'+val)
                        })
                        obj.a.m.n=500    //触发条件了上面的Watcher的条件才执行回调
                    */
                    
                    console.log('11111111')
                    console.log(obj)
                    console.log('11111111')
                    // obj.gg.push('9')
                    //obj.ww=100//必须改变上面的watcher才执行  他就触发了defineReactive中的get
                    
                    // new Watcher(obj,'tt',(val)=>{
                    //     console.log('watcher'+val)
                    // })

                    // obj.tt=200//必须改变上面的watcher才执行  他就触发了defineReactive中的get

                    // console.log('mmmmmmmccc')
                    // console.log(obj)

                    //watcher有点像java的接口
                    //指令的机理就是Watcher  指令 模板引擎 diff算法 最小量更新
                   
                   

                     // obj.bb.push(100)
                    // console.log(obj.bb)
                    // console.log(obj)

                    // let okk={
                    //      aa:{
                    //          bb:{
                    //              cc:7
                    //          }
                    //      },
                         
                    // }
                    // for(let kk in okk){
                    //     console.log('mmm')
                    //     console.log(kk)
                    //     console.log('mmm')
                    // } 


                    /*
                        数组是如何形成响应式的 
                        vue的底层改写了7个属性
                    */


         </script>
         


</body>
</html>